<script setup>
import { ref, onMounted, computed } from 'vue'
import { getPropertyDetailService } from '@/apis/detail'
import { useRoute } from 'vue-router'
import RoomMap from '@/views/RoomDetail/components/RoomMap.vue'
import RoomOrder from '@/views/RoomDetail/components/RoomOrder.vue'
import dayjs from 'dayjs'

const route = useRoute()

// 获取对话框组件
const dialogRef = ref()

// 控制图片数组的下标
const img_number = ref(0)

// 存储房源详情信息
const propertyDetail = ref({})

// 获取房源详情信息
const getPropertyDetail = async () => {
  const res = await getPropertyDetailService(route.params.id)
  propertyDetail.value = res.data.propertyDetail
}

onMounted(() => {
  getPropertyDetail()
})

// 切换前一张图片
const preImg = () => {
  if (img_number.value > 0) {
    img_number.value--
  }
}

// 切换后一张图片
const nextImg = () => {
  if (
    img_number.value <
    propertyDetail?.value?.image_url?.interior_img?.length - 1
  ) {
    img_number.value++
  }
}

// 解析后台传递过来的发布时间数据
const formatTime = computed(() => {
  if (propertyDetail.value && propertyDetail.value.publish_date) {
    return dayjs(propertyDetail.value.publish_date).format('YYYY-MM-DD')
  } else {
    return '发布时间未知'
  }
})

// 点击预约按钮打开对话框
const open = () => {
  if (propertyDetail.value.id) {
    dialogRef.value.openDialog(propertyDetail.value.id)
  } else {
    dialogRef.value.openDialog()
  }
}
</script>

<template>
  <div class="container">
    <div class="header">
      <h1>{{ propertyDetail.title }}</h1>
      <p>发布时间：{{ formatTime }}</p>

      <div class="top">
        <el-tabs type="border-card" tab-position="left" class="tabs">
          <el-tab-pane>
            <template #label>
              <span>
                <i class="iconfont icon-charutupian"></i>
                <h4>室内图</h4>
              </span>
            </template>

            <div class="interior_img">
              <div class="pre">
                <i class="iconfont icon-zuozuo-" @click="preImg"></i>
              </div>
              <img
                :src="propertyDetail?.image_url?.interior_img[img_number].url"
              />
              <div class="next">
                <i class="iconfont icon-youyou-" @click="nextImg"></i>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane>
            <template #label>
              <span>
                <i class="iconfont icon-huxingtu1"></i>
                <h4>户型图</h4>
              </span>
            </template>
            <div class="floor_img">
              <img :src="propertyDetail?.image_url?.floor_plan_img.url" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div class="content">
      <div class="introduce">
        <h2>房屋信息</h2>

        <h1>{{ Math.floor(propertyDetail.price) }}</h1>
        元/月

        <ul>
          <li>租赁类型：{{ propertyDetail.rent_type }}</li>
          <li>
            户型： {{ propertyDetail.room_count }}室{{
              propertyDetail.livingroom_count
            }}厅{{ propertyDetail.bathroom_count }}卫
          </li>
        </ul>

        <ul>
          <li>面积：{{ Math.floor(propertyDetail.room_area) }}平方米</li>
          <li>朝向：{{ propertyDetail.room_direction }}</li>
        </ul>

        <ul>
          <li>楼层：{{ propertyDetail.floor }}</li>
          <li>装修：{{ propertyDetail.decorate_type }}</li>
        </ul>

        <ul>
          <li>小区：{{ propertyDetail.resident }}</li>
          <li>地址：{{ propertyDetail.address }}</li>
        </ul>

        <el-button type="primary" size="large" @click="open"
          >立即预约</el-button
        >
        <RoomOrder ref="dialogRef"></RoomOrder>

        <h2>卧室设施</h2>
        <ul v-if="propertyDetail && propertyDetail.bedroom_facility">
          <li>
            <i
              class="iconfont icon-dianshiji"
              :class="{
                'icon-lianxi2hebing_jinzhi': !propertyDetail.bedroom_facility.tv
              }"
            ></i
            >电视
          </li>
          <li>
            <i
              class="iconfont icon-kongtiao"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.bedroom_facility.air_conditioner
              }"
            ></i
            >空调
          </li>
          <li>
            <i
              class="iconfont icon-yigui"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.bedroom_facility.closet
              }"
            ></i
            >衣柜
          </li>
          <li>
            <i
              class="iconfont icon-chuang"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.bedroom_facility.bed
              }"
            ></i
            >床
          </li>
          <li>
            <i
              class="iconfont icon-weishengjian"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.bedroom_facility.bathroom
              }"
            ></i
            >卫生间
          </li>
          <li>
            <i
              class="iconfont icon-zhinengsuo"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.bedroom_facility.smart_lock
              }"
            ></i
            >智能门锁
          </li>
          <li>
            <i
              class="iconfont icon-yangtai"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.bedroom_facility.balcony
              }"
            ></i
            >阳台
          </li>
          <li>
            <i
              class="iconfont icon-nuanqi"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.bedroom_facility.heating
              }"
            ></i
            >暖气
          </li>
        </ul>

        <h2>公共设施</h2>
        <ul v-if="propertyDetail && propertyDetail.public_facility">
          <li>
            <i
              class="iconfont icon-bingxiang"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.public_facility.fridge
              }"
            ></i
            >冰箱
          </li>
          <li>
            <i
              class="iconfont icon-xiyiji"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.public_facility.washing_machine
              }"
            ></i
            >洗衣机
          </li>
          <li>
            <i
              class="iconfont icon-reshuiqi1"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.public_facility.water_heater
              }"
            ></i
            >热水器
          </li>
          <li>
            <i
              class="iconfont icon-kuandai1"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.public_facility.broadband
              }"
            ></i
            >宽带
          </li>
          <li>
            <i
              class="iconfont icon-shafa1"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.public_facility.sofa
              }"
            ></i
            >沙发
          </li>
          <li>
            <i
              class="iconfont icon-chouyouyanji1"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.public_facility.range_hood
              }"
            ></i
            >油烟机
          </li>
          <li>
            <i
              class="iconfont icon-ranqizao-xian"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.public_facility.gas_stove
              }"
            ></i
            >燃气灶
          </li>
          <li>
            <i
              class="iconfont icon-kezuofan"
              :class="{
                'icon-lianxi2hebing_jinzhi':
                  !propertyDetail.public_facility.cooking_allowed
              }"
            ></i
            >可做饭
          </li>
        </ul>

        <h2>房源概况</h2>
        <p>{{ propertyDetail.description }}</p>

        <!-- 房源地图 -->
        <div
          v-if="
            propertyDetail.latitude &&
            propertyDetail.latitude &&
            propertyDetail.resident
          "
        >
          <h2>{{ propertyDetail.resident }}</h2>
          <RoomMap
            :longitude="propertyDetail.longitude"
            :latitude="propertyDetail.latitude"
            :resident="propertyDetail.resident"
          ></RoomMap>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 80%;
  background-color: #fff;

  .header {
    h1 {
      padding: 40px 30px;
    }

    p {
      padding: 10px 30px;
      font-size: 16px;
    }

    .top {
      .tabs {
        ::v-deep .el-tabs__nav {
          width: 150px;
          height: 540px;

          .el-tabs__item {
            height: 100%;

            span {
              display: flex;
              width: 100%;
              height: 100%;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              font-size: 20px;

              .iconfont {
                font-size: 25px;
              }
            }
          }
        }

        ::v-deep .el-tabs__content {
          width: auto;
          height: auto;
          display: flex;
          position: relative;
          align-items: center;
          justify-content: center;
          padding: 0;
        }

        .interior_img {
          width: 800px;
          height: 530px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .pre {
            position: absolute;
            top: 0;
            left: 0;

            &:hover {
              transform: scale(1.5);
              transition: transform 0.3s ease;
            }
          }

          .next {
            position: absolute;
            top: 0;
            right: 0;

            &:hover {
              transform: scale(1.5);
              transition: transform 0.3s ease;
            }
          }

          .iconfont {
            font-size: 60px;
            line-height: 500px;
            color: $ljhColor;
            margin: 30px;
          }

          img {
            width: 100%;
            height: 100%;
          }
        }

        .floor_img {
          width: 900px;
          height: 530px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .content {
    width: 100%;
    padding: 50px;

    .introduce {
      position: relative;

      h2 {
        padding-top: 10px;
        padding-bottom: 20px;
        border-bottom: 2px solid #f5f5f5;
        margin-top: 80px;
      }

      h1 {
        display: inline-block;
        font-size: 40px;
        color: red;
        margin: 20px;
      }

      ul {
        display: flex;
        justify-content: space-between;
        align-items: center;

        li {
          padding: 20px;
          font-size: 20px;
          text-align: center;
          display: flex;
          flex-direction: column;

          .iconfont {
            font-size: 40px;
            font-weight: bold;
          }
        }
      }

      button {
        position: absolute;
        right: 0;
        font-size: 18px;
        margin: 20px;
      }

      p {
        font-size: 18px;
        margin-bottom: 40px;
      }
    }
  }
}
</style>
